import React, {Component} from 'react'
var Checkbox = require('antd/lib/checkbox')
var Input = require('antd/lib/input')
var Icon = require('antd/lib/icon')
var Button = require('antd/lib/button')
const CheckboxGroup = Checkbox.Group;
import {FormattedMessage} from 'react-intl';

class Catalog extends Component {
    state = {
        priceLow: '',
        priceHight: '',
        checkShow: [],
        checkValue: [],
    }
    onChange1 = (checkedValues) => {
        this.setState({
            checkValue: checkedValues
        })
        let id = []
        for(let i of this.state.checkShow){
            for(let j of checkedValues) {
                if(i.name == j) {
                    id.push(i.categoryId)
                }
            }
        }
        if(id.length==0) {
            id = null
        }
        this.props.catalogChange(id)
    };
    onChangePriceLow = (event) => {
        this.setState({
            priceLow: event.target.value.replace(/[^\-?\d.]/g,'')
        });
    };
    onChangePriceHeight = (event) => {
        this.setState({
            priceHight: event.target.value.replace(/[^\-?\d.]/g,'')
        });
    };
    blurHeight = (e) => {
        if(this.state.priceLow!='') {
            if(parseFloat(e.target.value)<parseFloat(this.state.priceLow)) {
                this.setState({
                    priceHight: this.state.priceLow
                });
            }
        }
    }
    blurLow = (e) => {
        if(this.state.priceHight!='') {
            if(parseFloat(e.target.value)>parseFloat(this.state.priceHight)) {
                this.setState({
                    priceLow: this.state.priceHight
                });
            }
        }
    }
    search = () => {
        this.props.search(this.state)
    };

    componentDidMount(){
        this.setState({
            checkShow: this.props.catalogListData,
        })
        let num = 0
        for(let item of this.props.catalogListData){
            if(item.categoryId==this.props.categoryId){
                num++
                this.setState({
                    checkShow: this.props.catalogListData,
                })
                if(item.categoryId==this.props.categoryId) {
                    let arr = []
                    arr.push(item.name)
                    this.setState({
                        checkValue: arr
                    })
                }
            }
        }
        if (num==0){
            for(let item of this.props.catalogListData){
                for(let items of item.subList){
                    if(items.categoryId==this.props.categoryId) {
                        this.setState({
                            checkShow: item.subList,
                        },()=>{
                            for(let i of item.subList){
                                if(i.categoryId==this.props.categoryId) {
                                    let arr = []
                                    arr.push(i.name)
                                    this.setState({
                                        checkValue: arr
                                    })
                                }
                            }
                        })
                    }
                }
            }
        }
    }
    
    componentWillReceiveProps(nextProps) {
        
        if(JSON.stringify(this.props.catalogListData)!=JSON.stringify(nextProps.catalogListData)) {
            this.setState({
                checkShow: nextProps.catalogListData,
            })
        }
        if(nextProps.categoryId){
            if(this.props.categoryId!=nextProps.categoryId) {
                let num = 0
                for(let item of nextProps.catalogListData){
                    if(item.categoryId==nextProps.categoryId){
                        num++
                        this.setState({
                            checkShow: nextProps.catalogListData,
                        })
                        if(item.categoryId==nextProps.categoryId) {
                            let arr = []
                            arr.push(item.name)
                            this.setState({
                                checkValue: arr
                            })
                        }
                    }
                }
                if (num==0){
                    for(let item of nextProps.catalogListData){
                        for(let items of item.subList){
                            if(items.categoryId==nextProps.categoryId) {
                                this.setState({
                                    checkShow: item.subList,
                                },()=>{
                                    for(let i of item.subList){
                                        if(i.categoryId==nextProps.categoryId) {
                                            let arr = []
                                            arr.push(i.name)
                                            this.setState({
                                                checkValue: arr
                                            })
                                        }
                                    }
                                })
                            }
                        }
                    }
                }
            }else {
                
            }
        }else {
            this.setState({
                checkShow: nextProps.catalogListData,
                /*checkValue: [],*/
            })
        }
        
    }

    render() {
        let categoryId = this.props.categoryId;
        return (
            <div className='catalog'>
                <div className='title-header'><FormattedMessage id='product_catalog' description='catalog' defaultMessage='CATALOG'/></div>
                <div className='type'>
                    <span className={this.props.skin == 'jewelry' ? 'small-title small-title-extra' : 'small-title'}><FormattedMessage id='product_categories' description='categories' defaultMessage='CATEGORIES'/></span>
                    {
                        this.props.catalogListData.length>0?
                            <CheckboxGroup
                                options={this.state.checkShow}
                                value={this.state.checkValue}
                                width={200}
                                onChange={this.onChange1} />:''
                    }

                </div>
                <div className='type'>
                    <span className='small-title'><FormattedMessage id='product_price' description='price' defaultMessage='PRICE'/></span>
                    <i className='line'/>
                    <div style={{textAlign:'center'}}>
                        <Input
                            onBlur={this.blurLow}
                            onChange={this.onChangePriceLow.bind(this)}
                            style={{width:'100px',float: 'left'}}
                            value={this.state.priceLow}
                            prefix={<span>$</span>}/>
                        <div style={{margin:'5px 10px 0 10px',display: 'inline-block'}}> —— </div>
                        <Input
                            onBlur={this.blurHeight}
                            onChange={this.onChangePriceHeight.bind(this)}
                            style={{width:'100px',float: 'right'}}
                            value={this.state.priceHight}
                            prefix={<span>$</span>}/>

                        <div style={{width:'100%',float: 'left',textAlign: 'left'}}>
                            <Button  size="large" type="primary" style={{marginTop:20,fontSize: 16}} onClick={this.search}>
                                <FormattedMessage id='product_search' description='search' defaultMessage='Search'/>
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}


export default Catalog
